<template>
  <div class="errorpage" id="bgstar" ref="bgstar">
    <p class="errorp">503</p>

    <span
      v-for="(l, i) in spanNum"
      :key="i"
      class="span-dots"
      :style="{
        top: l.y,
        left: l.x,
        backgroundColor: l.rgb,
        animationDelay: l.rate + 's',
        transfrom: `scale(${l.scaler})`,
      }"
    ></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRate: 0,
      timer: null,
      rate: 100,
      spanNum: [],
    };
  },
  watch: {
    currentRate(v) {
      //v 监听变化的值
      // console.log(v);
      if (v == 100) {
        // this.gotoPage("guide");
      }
    },
  },
  methods: {
    spanInits() {
      // 获取屏幕宽高
      var screenW = document.getElementById("bgstar").clientWidth;
      var screenH = document.getElementById("bgstar").clientHeight;

      // var screenH = this.$ref.bgstar.clientHeight;
      console.log(screenW, screenH);
      for (var i = 0; i < 550; i++) {
        // 随机位置
        var x = Math.floor(Math.random() * screenW);
        var y = Math.floor(Math.random() * screenH);
        // 随机大小
        var scaler = Math.random() * 1.5;
        // 随机频率
        var rate = Math.random() * 2.5; //2.5 秒
        // 随机颜色
        var r = Math.floor(Math.random() * (255 - 0));
        var g = Math.floor(Math.random() * (255 - 0));
        var b = Math.floor(Math.random() * (255 - 0));

        this.spanNum.push({
          x: x + "px",
          y: y + "px",
          rate: rate,
          scaler: scaler,
          rgb: `rgb(${r},${g},${b})`,
        });
      }
    },
  },
  created() {
    // 这里的都是虚拟Dom ref是在真实dom之后
    // this.spanInits() 是真实dom获取
  },
  mounted() {
    this.spanInits();
  },
  computed: {
    text() {
      //内容
      return this.currentRate.toFixed(0) + "%";
    },
  },
};
</script>

<style lang="scss" scoped>
.errorpage {
  letter-spacing: 17px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0);
  position: relative;
  overflow: hidden;
  .errorp {
    width: 200px;
    color: white;
    font-size: 150px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 200px auto;
  }
  .errorimg {
    width: 220px;
    height: 220px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .myend {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      //::v-deep 解决局部scoped 更改外部样式
      color: white;
    }
  }
  .span-dots {
    position: absolute;
    animation: flash 3s alternate infinite;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    box-shadow: 0 0 2px yellow;
  }

  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>


